<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录/注册</title>
    <link rel="stylesheet" href="css/sign.css">
    <link rel="shortcut icon" href="favicon.ico" >
    <script src="scripts/anime.min.js"></script>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
    </script>
</head>

<body>
<h1 class="ml11">
            <span class="text-wrapper">
              <span class="line line1"></span>
              <span class="letters">Say Hello !!</span>
            </span>
</h1>
<div class="container">
    <!-- Sign Up -->
    <div class="container__form container--signup">
        <form action="#" class="form" id="form1">
            <h2 class="form__title">注册</h2>
            <input type="text" id="reg-username" placeholder="用户名" class="input"/>
            <input type="password" id="reg-password" placeholder="密码" class="input" />
            <input type="password" id="confirmPassword" placeholder="确认密码" class="input" />
            <button class="btn" id="register">注册</button>
        </form>
    </div>

    <!-- Sign In -->
    <div class="container__form container--signin">
        <form action="#" class="form" id="form2">
            <h2 class="form__title">登录</h2>
            <input type="text" id="username" placeholder="用户名" class="input"/>
            <input type="password" id="password" placeholder="密码" class="input"/>
            <button class="btn" id="login">登录</button>
        </form>
    </div>

    <!-- Overlay -->
    <div class="container__overlay">
        <div class="overlay">
            <div class="overlay__panel overlay--left">
                <button class="btn" id="signIn">登录</button>
            </div>
            <div class="overlay__panel overlay--right">
                <button class="btn" id="signUp">注册</button>
            </div>
        </div>
    </div>
</div>
<script>

    let uPattern = new RegExp("^([\u4E00-\uFA29]|[\uE7C7-\uE7F3]|[a-zA-Z0-9_]){3,20}$");
    let pPattern = /^[a-zA-Z0-9]{5,22}$/;

    //登录按钮点击事件
    $("#login").click(function (){
        const username = $("#username").val();
        const password = $("#password").val();
        $("#username").val("");
        $("#password").val("");
        if(username === "" || password === "") return;
        //地址 参数 回调函数
        $.get("/loginapi",{username: username,password: password},function(data,status){
            const result = $.parseJSON(data);
            alert(result.message);
            if(result.success === true){
                window.location.href = "/";
            }
        });
    });

    //注册按钮点击事件
    $("#register").click(function () {
        const regUsername = $("#reg-username").val();
        const regPassword = $("#reg-password").val();
        const confirmPassword = $("#confirmPassword").val();
        $("#reg-username").val("");
        $("#reg-password").val("");
        $("#confirmPassword").val("");
        if(regUsername==="" || regUsername==="" || confirmPassword===""){
            alert("你有内容没填!");
            return;
        }
        if(confirmPassword!==regPassword){
            alert("两遍密码不一样!");
            return;
        }
        if(!uPattern.test(regUsername)){
            alert("用户名不符合规则!");
            return;
        }
        if(!pPattern.test(regPassword)){
            alert("密码不符合规则!");
            return;
        }
        if(regPassword.length < 3 || regPassword.length > 10){
            alert("用户名长度必须在3-10位之间!");
            return;
        }
        if(regPassword.length < 5 || regPassword.length > 15){
            alert("密码长度必须在5-15位之间!");
            return;
        }
        if(confirmPassword === regPassword && regUsername.length<=10){
            $.get("/regapi",{username: regUsername,password: regPassword},function (data,status){
                const result = $.parseJSON(data);
                alert(result.message);
                if(result.success === true){
                    $("#signIn").click();
                    return;
                }
            });
        }
    })


    /*字体动画*/
    var textWrapper = document.querySelector('.ml11 .letters');
    textWrapper.innerHTML = textWrapper.textContent.replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>");

    anime.timeline({loop: true})
        .add({
            targets: '.ml11 .line',
            scaleY: [0,1],
            opacity: [0.5,1],
            easing: "easeOutExpo",
            duration: 700
        })
        .add({
            targets: '.ml11 .line',
            translateX: [0, document.querySelector('.ml11 .letters').getBoundingClientRect().width + 10],
            easing: "easeOutExpo",
            duration: 700,
            delay: 100
        }).add({
        targets: '.ml11 .letter',
        opacity: [0,1],
        easing: "easeOutExpo",
        duration: 600,
        offset: '-=775',
        delay: (el, i) => 34 * (i+1)
    }).add({
        targets: '.ml11',
        opacity: 0,
        duration: 2000,
        easing: "easeOutExpo",
        delay: 1000
    });
    const signInBtn = document.getElementById("signIn");
    const signUpBtn = document.getElementById("signUp");
    const fistForm = document.getElementById("form1");
    const secondForm = document.getElementById("form2");
    const container = document.querySelector(".container");


    signInBtn.addEventListener("click", () => {
        container.classList.remove("right-panel-active");
    });

    signUpBtn.addEventListener("click", () => {
        container.classList.add("right-panel-active");
    });

    fistForm.addEventListener("submit", (e) => e.preventDefault());
    secondForm.addEventListener("submit", (e) => e.preventDefault());
</script>
</body>
</html>